<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="app">
    <el-container>
        <el-header>
            <!--搜索框-->
            <div id="searchFrom">
                <form id="Search" >
                    <el-input placeholder="请输入内容" v-model="Search.name" class="input-with-select">
                        <el-select v-model="Search.select" slot="prepend" placeholder="请选择" style="width: 100px">
                            <el-option label="科室" value="1"></el-option>
                            <el-option label="疾病" value="2"></el-option>
                            <el-option label="医生" value="3"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </form>
            </div>
        </el-header>
        <el-main>

            <!--走马灯-->
            <div id="trotting-horse-lamp">
                <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item v-for="item in 4" :key="item">
                        <!--添加图片-->
                    </el-carousel-item>
                </el-carousel>
            </div>



            <!--预约-->
            <el-row id="registration">
                <el-col :span="6">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>预约查询</span>
                        </div>
                        <div id="RegistrationForm">
                            <form>
                                <el-select v-model="value" clearable placeholder="请选择科室" style="margin-bottom: 20px">
                                    <el-option
                                            v-for="item in administrative"
                                            :key="item.administrativeId"
                                            :label="item.administrativeName"
                                            :value="item.administrativeId">
                                    </el-option>
                                </el-select>
                                <el-button type="primary" @click="OnlineRegistration(value)">预约挂号</el-button>
                            </form>
                        </div>
                        <el-input placeholder="请输入身份证ID查询患者信息" v-model="cardId" @keyup.enter.native="searchIdCard" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="searchIdCard" ></el-button>
                        </el-input>
                    </el-card>
                </el-col>
                <el-col :span="12" >
                    <el-card class="box-card" style="width: 915px" >
                        <div slot="header" class="clearfix">
                            <span>信息展示</span>
                        </div>
                        <el-table
                                :data="registerTable"
                                style="width: 100%">
                            <el-table-column
                                    label=""
                                    align="center"
                            >
                                <template slot-scope="scope">
                                    <div >
                                        {{scope.row.patientName}}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label=""
                                    align="center"
                            >
                                <template slot-scope="scope">
                                    <div >
                                        {{scope.row.administrativeName}}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label=""
                                    align="center"
                            >
                                <template slot-scope="scope">
                                    <div >
                                        {{scope.row.doctorName}}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label=""
                                    align="center"
                            >
                                <template slot-scope="scope">
                                    <div >
                                        {{scope.row.doctorDuty}}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label=""
                                    align="center"
                            >
                                <template slot-scope="scope">
                                    <div >
                                        {{scope.row.money}}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label=""
                                    align="center"
                            >
                                <template slot-scope="scope">
                                    <div >
                                        {{scope.row.status}}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label=""
                                    align="center"
                            >
                                <template slot-scope="scope">
                                    <div >
                                        {{scope.row.bookTime}}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label=""
                                    align="center"
                            >
                                <template slot-scope="scope">
                                    <div >
                                        {{scope.row.isValid}}
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-col>

                <el-col :span="6">
                    <el-card class="box-card" >
                        <div slot="header" class="clearfix">
                            <span>名医推荐</span>
                        </div>
                        <div v-for="o in 4" :key="o" class="text item">
                            {{'列表内容 ' + o }}
                        </div>
                    </el-card>
                </el-col>

            </el-row>
            <div style="width: 100%;height: 20px"></div>

             <!--标签页-->
            <el-tabs type="border-card">
                <el-tab-pane>
                    <span slot="label"></i>内科</span>
                  内科
                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label"></i>外科</span>
                    外科
                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label"></i>妇产科</span>
                    妇产科
                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label"></i>儿科</span>
                    儿科
                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label"></i>皮肤科</span>
                    皮肤科
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>

    <el-dialog
            title="预约挂号"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="可预约时间" prop="region">
                <el-select v-model="ruleForm.time" placeholder="请选择时间">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>
<style>
    #login{
        margin-left: 600px;
    }
    #registration{
        height: 250px;

        margin-top: 20px;
        margin-bottom: 20px;
    }
    #RegistrationForm{
        margin-bottom: 10px;
    }
    .box-card{
        width: 450px;
        height: 250px;
        margin-top: 20px;

    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    #searchFrom{

        width: 600px;
        margin:0 auto;
        margin-top: 20px;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            Search: {
                name:'',
                select: ''
            },
            currentDate: new Date(),
            registrationForm:{
                subject:'',
                section:''
            },
            administrative:[{
                administrativeName:'',
                administrativeId:''
            }],
            value:'',
            cardId:'',
            centerDialogVisible:false,
            ruleForm:{
                name:'',
                region:''

            },
            registerTable: []

        },
        methods:{
             //预约挂号 跳转页面
            OnlineRegistration:function (res) {
                window.location="appointment.html?administrativeId="+res;
            },
            searchIdCard:function(){
                var vm=this;
                axios.get("/medical/register/selectRegisterList",{
                    params:{
                        "patientIdCard":this.cardId
                    }
                }).then(resp=>{
                    console.log(resp.data.data);
                    vm.registerTable=resp.data.data;
                });
            }
        },
        //计算属性
        computed:{

        },
        //钩子函数
        mounted:function () {
             axios.get("/medical/administrative/list").then(resp=>{
                 this.administrative=resp.data.data;
             })
        }
    });
</script>
</body>
</html>
